<template>
  <div class='webgl-list'>
    <ul class="list">
      <li>
        <h4>WebGL绘图实现正多边形</h4>
          <a-form layout="inline" :form="form" class="form">
            <a-form-item label='正多边形的边数'>
              <a-input-number v-decorator="[
                  'count',
                  {
                    initialValue: count,
                    rules: [{ required: true, message: 'count不能为空' }]
                  }
                ]"
                :min="3"
                :step="1">
              </a-input-number>
            </a-form-item>
            <a-form-item  label='半径长度'>
              <a-input-number v-decorator="[
                  'length',
                  {
                    initialValue: length,
                    rules: [{ required: true, message: 'length不能为空' }]
                  },
                ]"
                :min="0.5"
                :max="2"
                :step="0.1">
              </a-input-number>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" ghost @click="product"  html-type="submit">
                生成正多边形
              </a-button>
            </a-form-item>
          </a-form>
        <canvas width="400" height="400" class="webgl"></canvas>
      </li>
      <li>
        <h4>WebGL绘图实现正多角形</h4>
          <a-form layout="inline" :form="formStart" class="form">
            <a-form-item label='正多角形的角数'>
              <a-input-number v-decorator="[
                  'countStart',
                  {
                    initialValue: countStart,
                    rules: [{ required: true, message: 'countStart不能为空' }]
                  }
                ]"
                :min="5"
                :step="1">
              </a-input-number>
            </a-form-item>
            <a-form-item  label='正多角形半径'>
              <a-input-number v-decorator="[
                  'lengthStart',
                  {
                    initialValue: lengthStart,
                    rules: [{ required: true, message: 'lengthStart不能为空' }]
                  },
                ]"
                :min="0.5"
                :max="2"
                :step="0.1">
              </a-input-number>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" ghost @click="productStart"  html-type="submit">
                生成正多角形
              </a-button>
            </a-form-item>
          </a-form>
        <canvas width="400" height="400" class="webglStart"></canvas>
      </li>
      <li>
        <h4></h4>
      </li>
    </ul>
  </div>
</template>

<script>
import { webglFunction } from './glsl.config'

export default {
  name: 'WebGL',
  props: {

  },
  components: {

  },
  data () {
    return {
      canvas: null,
      webglStart: null,
      count: 3,
      countStart: 5,
      length: 0.5,
      lengthStart: 0.5,
      form: this.$form.createForm(this, { name: 'input' }),
      formStart: this.$form.createForm(this, { name: 'inputStart' })
    }
  },
  created () {

  },
  mounted () {
    // 1创建webgl上下文
    this.canvas = document.getElementsByClassName('webgl')[0]
    this.webglStart = document.getElementsByClassName('webglStart')[0]
    this.webglRender()
  },
  watch: {

  },
  methods: {
    // 使用webgl绘制三角形
    webglRender () {
      webglFunction(this.canvas, new Float32Array([-1, -1, 0, 1, 1, -1]))
      this.productStart()
    },
    // 生成指定规格的正多边形
    product () {
      // 圆的内接正多边形，每个点都在圆上
      const points = []
      const { count, length } = this.form.getFieldsValue()
      for (let i = 0; i < count; i++) {
        const deg = Math.PI * 2 * i / count
        const x = Math.cos(deg) * length
        const y = Math.sin(deg) * length
        points.push(x, y)
      }
      webglFunction(this.canvas, new Float32Array(points))
    },
    // 绘制正多角形
    productStart () {
      const points = [0, 0]
      const { countStart, lengthStart } = this.formStart.getFieldsValue()
      let x, y
      for (let i = 0; i <= countStart * 2; i++) {
        const degBig = Math.PI * 2 * i / (countStart * 2)
        if (i % 2) {
          x = Math.cos(degBig) * lengthStart
          y = Math.sin(degBig) * lengthStart
        } else {
          x = Math.cos(degBig) * lengthStart / 2
          y = Math.sin(degBig) * lengthStart / 2
        }
        points.push(x, y)
      }
      webglFunction(this.webglStart, new Float32Array(points))
    }
  }
}
</script>

<style lang="scss" scoped>
.webgl-list{
  .list{
    display: grid;
    grid-template-columns: repeat(4, 25%);
  }
  .form{
    display: grid;
    ::v-deep{
      .ant-input-group-addon{
        .ant-btn{
          border: none;
          background-color: #FAFAFA;
        }
      }
      .ant-form-item{
        display: flex;
      }
      .ant-input-group-addon{
        padding: 0;
      }
      .ant-input{
        text-align: center;
        height: 35px;
      }
      .ant-input-group-wrapper{
        width: 70%;
      }
    }
  }
}
</style>
